<template>
  <el-container>
    <el-header>
      <el-form :model="form" label-width="auto" :inline="true" style="display: flex; align-items: center;">
        <el-form-item label="接口地址" style="flex-grow: 1;">
          <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <a href="#" style="color: var(--transparent-4)" @click="openLink('https://binaryify.github.io/NeteaseCloudMusicApi')">https://binaryify.github.io/NeteaseCloudMusicApi</a>
    </el-header>
    <div class="full">
      <iframe ref="iframe" src="https://binaryify.github.io/NeteaseCloudMusicApi"
          width="100%" height="100%">
      </iframe>
    </div>
    <el-drawer v-model="drawer"  direction="rtl" size="80%" >
      <template #header>
        <h4>响应报文</h4>
        <el-button type="success" @click="copy" v-if="result">
          <el-icon class="el-icon--left"><i-bi-copy /></el-icon>
          复制
        </el-button>
      </template>
      <code v-html="resdata"></code>
    </el-drawer>
  </el-container>
</template>
<script setup lang="ts" name="ApiDoc">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus/es";
import api from "@/assets/apis/instance";

const drawer = ref(false)
const form = reactive({
  url: "",
  query: {}
});

const resdata = ref<string>("")
const result = ref<string>("")
const iframe = ref(null)

function onSubmit() {
    api.get(form.url).then((res) => {
      let json = JSON.stringify(res, null, 2)
      result.value = json
      resdata.value = json.replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\n/g, "<br/>")
        .replace(/ {2}/g, '&nbsp;&nbsp;')
      drawer.value = true
    })
}

function openLink(url){
  window.electron.ipcRenderer.send("new-window",url);
}
async function copy() {
  await navigator.clipboard.writeText(result.value);
  ElMessage.success("复制成功");
}
</script>
<style scoped lang="scss">
.full {
  height: calc(100vh - 150px);
}
.el-form .el-form-item--label-right{
  margin-bottom: 0px;
}
</style>
